<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>线性渐变 - 从上到下（默认情况下）</title>
    <style>
        /* CSS3 线性渐变 */
        /* 为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。 */
        /* 语法 */
        /* background-image: linear-gradient(direction, color-stop1, color-stop2, ...); */

        /* 下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色： */

        /* 从上到下的线性渐变： */
        #grad1 {
            height: 200px;
            /* 浏览器不支持时显示 */
            background-color: red;
            background-image: linear-gradient(#e66465, #9198e5);
        }
    </style>
</head>

<body>

    <h3>线性渐变 - 从上到下</h3>
    <p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

    <div id="grad1"></div>

    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>

</html>